<template>
  <div>
    <div class="search-container">
      <el-form ref="searchRef" :inline="true">
        <el-form-item label="标题">
          <el-input v-model="projectName2" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="projectName2" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="value1" type="date" placeholder="请选择时间" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="search-container">
      <div style="display: flex;">
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
        <el-button type="primary" style="margin-left: 20px;">删除</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="标题" />
        <el-table-column prop="reportnum1" label="内容" />
        <el-table-column prop="reportnum2" label="创建人" />
        <el-table-column prop="reportnum3" label="创建时间" />
        <el-table-column prop="reportnum9" label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" size="small" @click="drawer = true">
              详情
            </el-button>
            <el-button type="primary" size="small">
              编辑
            </el-button>
            <el-button type="primary" size="small">
              删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;margin-bottom: 20px;display: flex;justify-content: center;">
        <el-pagination background layout="prev, pager, next, jumper" :total="2" />
      </div>

      <el-dialog v-model="dialogVisible" title="新增消息通知" width="800">
        <div>
          <div>标题</div>
          <el-input></el-input>
          <div style="margin-top: 20px;">
            <div class="container">
              <div class="plugins-tips">
                wangEditor：轻量级 web 富文本编辑器，配置方便，使用简单。 访问地址：
                <a href="https://www.wangeditor.com/doc/" target="_blank">wangEditor</a>
              </div>
              <div style="border: 1px solid #ccc; margin-bottom: 10px">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
                <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
                  @onCreated="handleCreated" />
              </div>
              <!-- <el-button type="primary" @click="syncHTML">提交</el-button> -->
            </div>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-drawer v-model="drawer" title="公告详情" :direction="rtl" size="1000px">
        <template #header="{ close, titleId, titleClass }">
          <div>
            <div style="display: flex;">
              <h4 :id="titleId" :class="titleClass">检测机构1</h4>

            </div>
            <div style="font-size: 12px;">
              <span>创建人</span><span style="margin-left: 20px;">Admin</span>
              <span style="margin-left: 20px;">创建时间</span><span style="margin-left: 20px;">2021-01-19 17:13</span>
            </div>
          </div>
        </template>
        <div>
          <div style="display: flex;align-items: center;">
            <div style="width: 4px;height: 18px;background: #000;margin-right: 10px;"></div>
            <div>
              基本信息
            </div>
          </div>
          <div style="margin-top: 20px;display: flex;">
            <div style="width: 150px;">标题</div>
            <div style="margin-left: 10px;">关于表彰的通知</div>
          </div>
          <div style="margin-top: 20px;display: flex;">
            <div style="width: 150px;">创建人</div>
            <div style="margin-left: 10px;">admin</div>
            <div style="width: 150px;">创建时间</div>
            <div style="margin-left: 10px;">2024-05-13 11:55</div>
          </div>
          <div style="margin-top: 20px;display: flex;">
            <div style="width: 150px;">详情描述</div>
            <div style="margin-left: 10px;">表彰张飞工作出色</div>

          </div>





        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { onBeforeUnmount, ref, reactive, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
// import Editor from '@tinymce/tinymce-vue';
// import 'tinymce/models/dom/Sizzle';

const content = ref('');

const tinymceInit = {
  skin: false,
  content_css: '//www.tiny.cloud/css/codepen.min.css',
  plugins: 'lists link image code',
  toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | code',
};

const resultdialogVisible = ref(false)
const projectName = ref('')
const value1 = ref('')
const projectName2 = ref('')
const tableData = ref([
  {
    index: '1',
    name: '关于表彰的通知',
    num: 'A检测',
    reportnum: '',
    reportnum1: '表彰张飞工作出色',
    reportnum2: 'admin',
    reportnum3: '2022-01-19 10:37',
    reportnum4: '2022-01-19 10:37',
    reportnum5: '98%',
    reportnum6: 'admin',
    reportnum7: '2022-01-19 10:37',
    reportnum8: '晶',
    reportnum9: '晶',
  },
])

const dialogVisible = ref(false)
const options = [
  {
    value: '项目1',
    label: '项目1',
  },
  {
    value: '项目2',
    label: '项目2',
  },
  {
    value: '项目3',
    label: '项目3',
  },
  {
    value: '项目4',
    label: '项目4',
  },
  {
    value: '项目5',
    label: '项目5',
  },
]
const drawer = ref(false)

const scantableData = ref([{
  index: '试剂文件',
  name1: '试剂文件1',
  name2: '80M',
  name3: '试剂',
  name4: '.dat',
  name5: '546',
  name6: '0x18',
  name7: '1.0',
  name8: '96%',
  name9: '145',
  name10: '326kB',
  name11: '2022-01-19 10:37',
  name12: '成功',
}])

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref('<p>hello</p>');

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
  }, 1500);
});

const toolbarConfig = {};
const editorConfig = { placeholder: '请输入内容...' };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const syncHTML = () => {
  console.log(valueHtml.value);
};
</script>
<style scoped>
.search-container {
  padding: 20px 30px 0;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px
}
</style>